<template>
  <ex-dialog
    width="70%"
    class="ex-diolog"
    title="编辑标签商户"
    :visible="visible"
    @closeDialog="handleClose"
  >
    <div class="detail-header">
        <div class="dh-item">
           <div class="dh-title">添加商户：</div>
           <div class="dh-content">
              <!-- <el-select v-model="shopIdList" placeholder="输入店铺名称下拉选择添加，可批量勾选"  multiple collapse-tags filterable @change='changeSelect'>
                <el-checkbox v-model="checkedAll" @change='selectAll' style="margin:10px 0 10px 20px;">全选</el-checkbox>
                <el-option :label="item.value" :value="item.id" v-for="(item,index) in businessListings" :key="index"></el-option>
              </el-select> -->
              <ExSelect
                :selectOptions="businessListings"
                :mulSelecteds="shopIdList"
                placeholderValue="输入店铺名称下拉选择添加，可批量勾选"
                :tagSettingId="id"
                @update:updateMultipleSelect="val => shopIdList = val"
                @update:updateMultipleListings="val => businessListings = val"
                >
             </ExSelect>

              <el-button @click="addShop" type="primary" :loading="clickLoading">添加</el-button>
           </div>
        </div>
        <div class="dh-item">
           <div class="dh-title">关键字：</div>
           <div class="dh-content">
              <el-input v-model="query" placeholder="店铺名称\商户账号名称\手机号"></el-input>
              <el-button type="primary" @click="queryShop">查询</el-button>
              <el-button @click="resetting">重置</el-button>
           </div>
           <div class="dh-footer">
             <el-button type="primary" @click="handleAllDelete" :loading="delClickLoading">批量删除</el-button>
           </div>
        </div>
    </div>
    <div class="detail-table">
      <el-table :data="shopList" ref="tableRef" border style="width: 100%;margin-top:14px" @selection-change="handleSelectionChange" v-loading="loading" row-key="id">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column prop="shopName" align="center" label="店铺名称" />
        <el-table-column prop="merchantName" align="center" label="商户账户名称" />
        <el-table-column prop="phone" align="center" label="手机号" />
        <el-table-column prop="merchantArea" align="center" label="所属地区" />
        <el-table-column prop="shopTypeName" align="center" label="行业类型"  />
        <el-table-column prop="shenyeIndustryName" align="center" label="神椰店铺行业"  />
        <el-table-column   align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleDelete(scope.row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[10, 20,50,300,500]"
        @pagination="getDataList" />
    </div>
  </ex-dialog>
</template>
<script>
// api
import {
  shenyeShopTagSelect,
  addShenyeShopTag,
  shenyeShopTagList,
  deleteShenyeShopTagRemoveByIds,
  deleteShenyeShopTag,
} from "@/api/merchants/merchantLabelSettings";
import ExSelect from "@/components/ExSelect/index";

export default {
  props: {
    visible: Boolean,
    id: String,
  },
  components:{
    ExSelect
  },
  data() {
    return {
      shopList:[],
      businessListings:[], //店铺名称下拉选择列表
      loading:false,
      data: {},
      dialogVisible: false,
      checkedAll:false, //是否全选
      clickLoading:false, //点击添加加载
      delClickLoading:false, //批量删除加载
      shopIdList:[], //商户id列表
      query:'', //店铺名称\商户账号名称手机号
      total: 0,
      deleteList:[], //批量删除列表
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    // this.getDetail();
     this.getBusinessListings()
     this.getDataList()
  },
  methods: { 
    // 店铺列表选择回调函数
    handleSelectionChange(e){
      var list = e.map(res=>{
        return res.id;
      })
      this.deleteList = list
    },
    // 添加商铺列表
    async addShop(){
      if(this.shopIdList.length == 0){
        this.$message({
              message: "请选择商户",
              type: "error",
            });
        return
      }
      var data = {
        tagSettingId:this.id,
        shopIdList:this.shopIdList
      }
      this.clickLoading = true
      try {
        var res = await addShenyeShopTag(data)
        setTimeout(()=>{
          this.$message({
              message: "添加成功",
              type: "success",
            });
            this.$emit('success')
            this.clickLoading = false
            this.shopIdList = []
            this.getBusinessListings()
            this.resetting()
        },800)
      } catch (error) {
        this.clickLoading = false
      }
    },
    // 失去焦点
    selectBlur(e){
      console.log(e)
    },
    //查询关键字
    queryShop(){
      this.queryParams.pageNum = 1
      this.getDataList()
    },
    // 重置关键字
    resetting(){
      this.query = ''
      this.queryParams.pageNum = 1
      this.getDataList()
    },
    // 单个删除
    handleDelete(id) {
      console.log()
      this.$confirm("你确定要删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
          deleteShenyeShopTag(id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.$emit('success')
                this.$refs.tableRef.clearSelection()
                this.getBusinessListings()
                this.resetting();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    // 多个批量删除
    handleAllDelete() {
      if(this.deleteList.length == 0){
        this.$message({
              message: "请勾选删除的数据",
              type: "error",
            });
        return
      }
      var data = [
        ...this.deleteList
      ]
      this.$confirm("确认删除选中的数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
          this.delClickLoading = true
          deleteShenyeShopTagRemoveByIds(data)
            .then((res) => {
              // const {} = res.result;
              setTimeout(() => {
                  this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                });
                this.$emit('success')
                this.delClickLoading = false
                this.$refs.tableRef.clearSelection()
                this.getBusinessListings()
                this.resetting();
              }, 1000);
            }).catch(()=>{
               this.delClickLoading = false
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    // 全选选择列表
    selectAll(){
      if (this.shopIdList.length < this.businessListings.length) {
            this.shopIdList = []
            this.businessListings.map((item) => {
              this.shopIdList.push(item.id)
            })
            this.checkedAll = true
            // selectedArray.value.unshift('全选')
          } else {
            this.shopIdList = []
            this.checkedAll = false
          }

    },
    changeSelect(val){
      console.log(val)
      if ( val.length == this.businessListings.length) {
          this.checkedAll = true
      } else  {
          this.checkedAll = false
      }
    },
    // 中台商户标签添加店铺下拉框选择列表
    async getBusinessListings(){
      var data = {
        tagSettingId:this.id
      }
      var res = await shenyeShopTagSelect(data)
      this.businessListings = res.result
    },
    getDataList(){
      var params = {
        ...this.queryParams,
        query:this.query,
        tagSettingId:this.id
      }
      this.loading = true
      shenyeShopTagList(params).then((res) => {
        const { records,total } = res.result;
        this.shopList = records;
        this.total = total
        this.loading = false
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

  .dh-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    .dh-title{
      width: 6em;
      text-align: right;
      font-size: 16px;
      color: #222222;
      
    }
    .dh-content{
      flex: 1;
      display: flex;
      flex-direction: row;
      .el-select,.el-input{
        width: 320px;
      }
      .el-button{
        margin-left: 20px;
      }
    }
  }

}
</style>
